<!doctype html>
<html lang="zh-cn">
<head>

    <meta charset="utf-8">
    <meta name="generator" content="Hugo 0.57.2" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Vue 学习 | The Sky of OtsWang</title>
    <meta property="og:title" content="Vue 学习 - The Sky of OtsWang">
    <meta property="og:type" content="article">
        
    <meta property="article:published_time" content="2019-02-12T10:26:05&#43;08:00">
        
        
    <meta property="article:modified_time" content="2019-02-12T10:26:05&#43;08:00">
        
    <meta name="Keywords" content="[vue]">
    <meta name="description" content="Vue 学习">
        
    <meta name="author" content="OtsWang">
    <meta property="og:url" content="https://otswang.gitee.io/hugo/post/webapp/vue/">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="/hugo/css/normalize.css">
    
        <link rel="stylesheet" href="/hugo/css/prism.css">
    
    <link rel="stylesheet" href="/hugo/css/style.css">
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    


    
    
</head>

<body>
<header id="header" class="clearfix">
    <div class="container">
        <div class="col-group">
            <div class="site-name ">
                
                    <a id="logo" href="https://otswang.gitee.io/hugo/">
                        The Sky of OtsWang
                    </a>
                
                <p class="description">擅长写HelloWorld的小小码农</p>
            </div>
            <div>
                <nav id="nav-menu" class="clearfix">
                    
                    
                    <a  href="https://otswang.gitee.io/hugo/" title="Home">Home</a>
                    
                    <a  href="https://otswang.gitee.io/hugo/tags/" title="Tags">Tags</a>
                    
                    <a  href="https://otswang.gitee.io/hugo/categories/" title="Categories">Categories</a>
                    
                    <a  href="https://otswang.gitee.io/hugo/archives/" title="Archives">Archives</a>
                    
                    <a  href="https://otswang.gitee.io/hugo/about/" title="About">About</a>
                    
                </nav>
            </div>
        </div>
    </div>
</header>


<div id="body">
    <div class="container">
        <div class="col-group">

            <div class="col-8" id="main">
                <div class="res-cons">
                    <article class="post">
                        <header>
                            <h1 class="post-title">Vue 学习</h1>
                        </header>
                        <date class="post-meta meta-date">
                            2019年2月12日
                        </date>
                        
                        <div class="post-meta">
                            <span>|</span>
                            
                                <span class="meta-category"><a href="https://otswang.gitee.io/hugo/categories/smallquickappweb">SmallQuickAppWeb</a></span>
                            
                        </div>
                        
                        
                        
                        <div class="post-content">
                            <p>Vue 基础知识学习</p>

<h1 id="实例">实例</h1>

<pre><code class="language-js">new vue {
    el: '#xx',
    data: {},
    computed: {},
    methods: {},
    components: {},
}
</code></pre>

<h1 id="条件">条件</h1>

<p><code>v-if</code> , <code>v-else</code>, <code>v-else-if</code></p>

<p><code>v-show</code></p>

<p><code>v-show</code>与<code>v-if</code>的区别</p>

<h1 id="循环">循环</h1>

<p><code>v-for</code> 可以循环list，object（类比map）， 整数等。</p>

<pre><code class="language-html">&lt;template v-for=&quot;item in list&quot; &gt;
    &lt;li &gt; {{ item }} &lt;/li&gt;
&lt;/template&gt;

&lt;template v-for=&quot;(value, key, index) in object &quot;&gt;
    {{ key }} : {{ value }} @ {{ index }}
&lt;/template&gt;

&lt;template v-for=&quot;i in N&quot;&gt;
    {{ i }}
&lt;/template&gt;
</code></pre>

<h1 id="计算属性">计算属性</h1>

<p>一个例子</p>

<pre><code class="language-html">&lt;div id = 'maind'&gt;
    &lt;p&gt; {{ message }} &lt;/p&gt;
    &lt;p&gt; {{ message.split('').reverse().join('') }} &lt;/p&gt;

    &lt;!-- 另一个 --&gt;

    &lt;p&gt; {{ reverseMessage }} &lt;/p&gt;

    &lt;!-- 不使用计算属性 --&gt;
    &lt;p&gt; {{ reverseMessage2() }} &lt;/p&gt;
&lt;/div&gt;
&lt;script&gt;
    new vue {
        el: &quot;#maind&quot;,
        data: {
            message: 'hello, ots',
        },
        // 计算属性，注意和methods的区别
        computed: {
            reverseMessage: function () {
                return this.message.split('').reverse().join('');
            }
        },

        methods: {
            reverseMessage2: function () {
                return this.message.split('').reverse().join('');
            }
        }
    }
&lt;/script&gt;
</code></pre>

<p>computed 与 methods的对比</p>

<p>我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。</p>

<p>在使用函数时需要添加括号。</p>

<h1 id="监听属性">监听属性</h1>

<p>watch</p>

<pre><code class="language-js">new Vue {
    el: '#xx',
    data: {
        num: 1,
    },
    watch: {
        num: function() {
            // ...
        }
    }
}

this.$watch(var_name, function(newValue, oldValue){
    console.log('from ', oldValue, ' to ', newValue);
})

</code></pre>

<h1 id="样式绑定">样式绑定</h1>

<p><code>v-bind:class</code> 与 <code>v-bind:style</code></p>

<h1 id="事件响应">事件响应</h1>

<p><code>v-on:xxx</code></p>

<p><em>事件修饰符</em></p>

<pre><code class="language-html">&lt;!-- 阻止单击事件冒泡 --&gt;
&lt;a v-on:click.stop=&quot;doThis&quot;&gt;&lt;/a&gt;
&lt;!-- 提交事件不再重载页面 --&gt;
&lt;form v-on:submit.prevent=&quot;onSubmit&quot;&gt;&lt;/form&gt;
&lt;!-- 修饰符可以串联  --&gt;
&lt;a v-on:click.stop.prevent=&quot;doThat&quot;&gt;&lt;/a&gt;
&lt;!-- 只有修饰符 --&gt;
&lt;form v-on:submit.prevent&gt;&lt;/form&gt;
&lt;!-- 添加事件侦听器时使用事件捕获模式 --&gt;
&lt;div v-on:click.capture=&quot;doThis&quot;&gt;...&lt;/div&gt;
&lt;!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --&gt;
&lt;div v-on:click.self=&quot;doThat&quot;&gt;...&lt;/div&gt;

&lt;!-- click 事件只能点击一次，2.1.4版本新增 --&gt;
&lt;a v-on:click.once=&quot;doThis&quot;&gt;&lt;/a&gt;
</code></pre>

<p><em>按键修饰符</em></p>

<pre><code class="language-html">&lt;a v-on:keyup.enter=&quot;submit&quot; &gt;&lt;/a&gt;
</code></pre>

<h1 id="表单数据">表单数据</h1>

<p><code>v-model=''</code></p>

<ul>
<li>输入</li>
<li>多选</li>
<li>单选</li>
<li>列表</li>
</ul>

<h1 id="组件">组件</h1>

<ul>
<li>全局组件</li>

<li><p>局部组件</p>

<pre><code class="language-js">// 全局组件，可以在任意实例中使用
Vue.component('tagName', {
template: '',
})

// 局部组件，只可在父组件中使用
new Vue {
el: '',
components: {
    tagName: '',
    tagName2: '',
}
}

</code></pre></li>
</ul>

<h1 id="自定义命令">自定义命令</h1>

<h1 id="路由">路由</h1>

<h1 id="vue-与-spring-boot集成">vue 与 spring boot集成</h1>

<p>项目的src/main目录结构如下：</p>

<pre><code>.                              
├── java                       
│   └── com                    
├── justVue                       
│   ├── README.md              
│   ├── build                  
│   ├── config                 
│   ├── dist                   
│   ├── index.html             
│   ├── node_modules           
│   ├── package.json           
│   ├── src                    
│   ├── static                 
│   └── test                   
└── resources                  
    ├── application.properties 
    └── static                 
</code></pre>

<p>将vue项目放入到如图的路径src/main下。</p>

<p>修改vue项目的config/index.js:</p>

<pre><code class="language-js">build: {
    // Template for index.html, set the path ../../resources/static
    index: path.resolve(__dirname, '../../resources/static/index.html'),

    // Paths, set the path ../../resources/static
    assetsRoot: path.resolve(__dirname, '../../resources/static'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
</code></pre>
                        </div>

                        


                        


                        <div class="post-meta meta-tags">
                            
                            <ul class="clearfix">
                                
                                <li><a href="https://otswang.gitee.io/hugo/tags/vue">vue</a></li>
                                
                            </ul>
                            
                        </div>
                    </article>
                    
    

    
    
                </div>
            </div>
            <div id="secondary">

    <section class="widget">
        <form id="search" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank" _lpchecked="1">
      
      <input type="text" name="q" maxlength="20" placeholder="Search">
      <input type="hidden" name="sitesearch" value="https://otswang.gitee.io/hugo/">
      <button type="submit" class="submit icon-search"></button>
</form>
    </section>

    

    <section class="widget">
        <h3 class="widget-title">最近文章</h3>
<ul class="widget-list">
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/middle_tools/kafka/" title="Kafka">Kafka</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/middle_tools/zk_starter/" title="Zookeeper Starter">Zookeeper Starter</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/java/javafx_starter/" title="Java Fx 入门学习">Java Fx 入门学习</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/other/codec/" title="常用加密/签名算法">常用加密/签名算法</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/other/docker/" title="Docker学习">Docker学习</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/webapp/react_starter/" title="React 从入门到入门">React 从入门到入门</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/lang/csharpe_starter/" title="C#语言从入门到入门">C#语言从入门到入门</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/java/java8time/" title="Java checklist">Java checklist</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/other/keyboard/" title="快捷键记录">快捷键记录</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/post/other/vim/" title="vim 使用记录">vim 使用记录</a>
    </li>
    
</ul>
    </section>

    

    <section class="widget">
        <h3 class="widget-title">分类</h3>
<ul class="widget-list">
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/algorithm/">algorithm(4)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/design/">design(7)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/doc/">doc(2)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/go/">go(3)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/java/">java(7)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/java-java8inaction/">java-java8inaction(11)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/java-juc/">java-juc(3)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/java-jvm/">java-jvm(2)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/java-spring/">java-spring(2)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/java-thinkinginjava/">java-thinkinginjava(11)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/middletools/">middletools(9)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/other/">other(24)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/qt/">qt(2)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/smallquickappweb/">smallquickappweb(4)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/webapp/">webapp(1)</a>
    </li>
    
    <li>
        <a href="https://otswang.gitee.io/hugo/categories/%E5%B0%8F%E4%BC%97%E8%AF%AD%E8%A8%80%E4%B8%80%E7%9E%A5/">小众语言一瞥(4)</a>
    </li>
    
</ul>
    </section>

    <section class="widget">
        <h3 class="widget-title">标签</h3>
<div class="tagcloud">
    
    <a href="https://otswang.gitee.io/hugo/tags/c/">c#</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/checklist/">checklist</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/codec/">codec</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/docker/">docker</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/elk/">elk</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/emmet/">emmet</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/file/">file</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/freemarker/">freemarker</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/git/">git</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/go/">go</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/http/">http</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/interview/">interview</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/java/">java</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/javascript/">javascript</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/juc/">juc</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/jvm/">jvm</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/keyboard/">keyboard</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/linux/">linux</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/lua/">lua</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/manjaro/">manjaro</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/map/">map</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/markdown/">markdown</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/mq/">mq</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/mybatis/">mybatis</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/mycat/">mycat</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/mysql/">mysql</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/nginx/">nginx</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/qt/">qt</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/react/">react</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/redis/">redis</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/rust/">rust</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/spring/">spring</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/springboot/">springboot</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/stream/">stream</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/tcp/">tcp</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/thymeleaf/">thymeleaf</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/tree/">tree</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/uml/">uml</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/vim/">vim</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/vlang/">vlang</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/vue/">vue</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/zookeeper/">zookeeper</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E4%BD%8D%E8%BF%90%E7%AE%97/">位运算</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E5%8D%8F%E8%AE%AE/">协议</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E5%A4%9A%E7%BA%BF%E7%A8%8B/">多线程</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E5%B9%B6%E5%8F%91%E9%9B%86%E5%90%88/">并发集合</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/">微信小程序</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E5%BF%AB%E5%BA%94%E7%94%A8/">快应用</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E6%97%B6%E9%97%B4%E7%B1%BB/">时间类</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E/">模板引擎</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E7%AE%97%E6%B3%95/">算法</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E7%BC%96%E7%A8%8B/">编程</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E7%BC%96%E7%A8%8B%E8%A7%84%E8%8C%83/">编程规范</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E8%AE%BE%E8%AE%A1/">设计</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">设计模式</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E9%99%90%E6%B5%81/">限流</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/">面向对象</a>
    
    <a href="https://otswang.gitee.io/hugo/tags/%E9%9D%A2%E8%AF%95/">面试</a>
    
</div>
    </section>

    

    <section class="widget">
        <h3 class="widget-title">其它</h3>
        <ul class="widget-list">
            <li><a href="https://otswang.gitee.io/hugo/index.xml">文章 RSS</a></li>
        </ul>
    </section>

    

</div>
        </div>
    </div>
</div>
<footer id="footer">
    <div class="container">
        &copy; 2020 <a href="https://otswang.gitee.io/hugo/">The Sky of OtsWang By OtsWang</a>.
        Powered by <a rel="nofollow noreferer noopener" href="https://gohugo.io" target="_blank">Hugo</a>.
        <a href="https://www.flysnow.org/" target="_blank">Theme</a> based on <a href="https://github.com/Dudiao137/maupassant-hugo" target="_blank">maupassant-ots</a>.
        
    </div>
</footer>


    <script type="text/javascript">
    
    (function(){
        $("pre code").parent().addClass("line-numbers")
    }())

    window.MathJax = {
        tex2jax: {
            inlineMath: [ ['$','$'] ],
            processEscapes: true
        }
    };
    </script>
    <script type="text/javascript" src="/hugo/js/prism.js" async="true"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>

<a id="rocket" href="#top"></a>
<script type="text/javascript" src="/hugo/js/totop.js?v=0.0.0" async=""></script>







 
 <script src="https://mermaidjs.github.io/scripts/mermaid.min.js"></script>
 <script>
       mermaid.initialize({ startOnLoad: true });
 </script>
</body>
</html>
